<script setup>
import { ref } from "vue"
import HelloVuex from "./components/HelloVuex.vue"
import { useStore } from "vuex"
import { INCREMENT } from "./store/mutations-type.js"

// 定义store变量
const store = useStore()

let counter = store.state.counter
// 定义counter操作方法，调用store中mutations中的方法，使用提交方式进行执行
// const incrementCounter = () => store.commit("increment")
// 抽取常量之后的提交方式
const incrementCounter = () => store.commit(INCREMENT)
const decrementCounter = () => store.commit("decrement")

// 提交风格问题
// 自定义增加大小
// 1、普通提交风格
// const addCount = (count) => store.commit("incrementCount", count);
// 2、特殊提交风格，这种提交风格传递的是一个对象
const addCount = (count) =>
	store.commit({
		type: "incrementCount",
		count, // 等同于 count:count
	})

// 添加学生
const addStu = () => {
	const stu = { id: 114, name: "小刚", age: 40 }
	store.commit("incrementStudent", stu)
}

// 更新信息
const updateInfo = () => {
	// 提交操作
	store.commit("updateInfo")
}

// 异步操作更新信息
const asyncUpdateInfo = () => {
	// 使用dispatch执行actions中的函数，这里传入参数
	// store.dispatch("asyncUpdateInfo", "我是payload")

	// 异步操作执行完之后，告知当前组件，即执行一个回调函数
	// 方式一：可以实现，但不够优雅
	// store.dispatch("asyncUpdateInfo", {
	// 	message: "我是携带的信息",
	// 	success: () => {
	// 		console.log("异步操作执行完毕")
	// 	},
	// })

	// 方式二：使用Promise改写，这时dispatch执行完毕返回的是一个Promise对象
	store.dispatch("asyncUpdateInfo", "我是携带的信息").then((res) => {
		console.log("异步操作执行完毕")
		console.log(res)
	})
}

// Modules模块更新名字
const updateName = () => {
	// 这里不需要区分是哪个模块，它会自动去主getters里面找，如果找不到则会依次在模块Module找
	store.commit("updateName", "里斯")
}

// 异步更新名字
const asyncUpdateName = () => {
	store.dispatch("asyncUpdateName", "里斯")
}
</script>

<template>
	<!-- 测试Vuex的模块化开发 -->
	<h1>------App的内容：Modules的内容-----</h1>
	<!-- 这里不需要区分是哪个模块，它会自动去主getters里面找，如果找不到则会依次在模块Module找 -->
	<h2>{{ store.getters.getName }}</h2>
	<!-- <button @click="updateName">更新名字</button> -->
	<button @click="asyncUpdateName">更新名字</button>
	<h2>{{ store.getters.getFullName }}</h2>
	<!-- 测试数据的响应式 -->
	<h1>----App的内容：Info的内容----</h1>
	<h2>{{ store.getters.getInfo }}</h2>
	<button @click="asyncUpdateInfo">更新信息</button>

	<h1>----App的内容----</h1>
	<h2>{{ store.getters.getCounter }}</h2>
	<button @click="incrementCounter">+</button>
	<button @click="decrementCounter">-</button>
	<!-- 定义两个传递参数的方法 -->
	<button @click="addCount(5)">+5</button>
	<button @click="addCount(10)">+10</button>
	<button @click="addStu">添加学生</button>
	<hello-vuex />
</template>

<style></style>
